import { Stack, Link } from 'expo-router';
<% if (props.stylingPackage?.name === "stylesheet") { %>
import { StyleSheet, View } from 'react-native';
<% } else if (props.stylingPackage?.name === "unistyles") { %>
import { StyleSheet } from 'react-native-unistyles';
import { View } from 'react-native';
<% } else { %>
import { View } from 'react-native';
<% } %>

import { Button } from '@/components/Button';
import { Container } from '@/components/Container';
import { ScreenContent } from '@/components/ScreenContent';

<% if (props.internalizationPackage?.name === "i18next") { %>
  import { InternalizationExample } from 'components/InternalizationExample';
<% } %>

export default function Home() {
  return (
    <% if (props.stylingPackage?.name === "nativewind") { %>
      <View className={styles.container}>
    <% } else { %>
      <View style={styles.container}>
    <% } %>
      <Stack.Screen options={{ title: 'Home' }} />
      <Container>
        <ScreenContent path="app/index.tsx" title="Home">
        <% if (props.internalizationPackage?.name === "i18next") { %>
          <InternalizationExample />
        <% } %>
        </ScreenContent>
        <Link href={{ pathname: '/details', params: { name: 'Dan' } }} asChild>
          <% if (props.stylingPackage?.name === "unistyles") { %>
              <Button title="Show Details" style={styles.button} />
          <% } else { %>
              <Button title="Show Details" />
          <% } %>
        </Link>
      </Container>
    </View>
  );
}

<% if (props.stylingPackage?.name === "nativewind") { %>
const styles = {
  container: "flex flex-1 bg-white",
}
<% } else if (props.stylingPackage?.name === "stylesheet") { %>
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});
<% } else if (props.stylingPackage?.name === "unistyles") { %>
const styles = StyleSheet.create((theme) => ({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  button: {
      marginHorizontal: theme.margins.xl,
  },
}));
<% } %>
